<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less">
    <link rel="stylesheet/less" href="./less/businessCard.less">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> 
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="./js/dom-to-image.min.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <div class="spell">我的名片</div>
                    <a href="./mine.html">
                        <img src="./img/arrow_back.png">
                    </a>
                </header>
            </div>
            <div class="scroll">
                <div class="swiper-container" id="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) in banner">
                            <div id="swiper">
                                <img :src="item.bannerImg"/>
                                <div id="posters" v-if="swiperStatus">
                                    <ul>
                                        <li>
                                            <ul>
                                                <li>
                                                    <img :src="item.img"/>
                                                </li>
                                                <li>
                                                    <ul>
                                                        <li>{{item.name}}</li>
                                                        <li>{{item.description}}</li>
                                                        <li>邀请码：{{item.businessCard}}</li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <img :src="item.codeImg"/>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="share">
                <ul>
                    <li v-for="(item,index) in share">
                        <img :src="item.img">
                        <div>{{item.name}}</div>
                    </li>
                </ul>
            </div> -->
        </div>
    </div>
</body>
</html>
<script type="module">
    import { getWeCartShare } from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
    let  timeOutEvent = 0;
    let app = new Vue({
        el: '#app',
        data: {
            swiper: [],
            userDefaultIcon: '',
            inviteCode: '',
            QRCode: '',
            banner: [],
            swiperStatus: true,
            share:[
                {
                    img: './img/download.png',
                    name: '下载图片'
                },
                {
                    img: './img/CircleFriends.png',
                    name: '分享到朋友圈'
                },
                {
                    img: './img/weChat.png',
                    name: '分享给微信好友'
                }
            ],
            swiperOption: {
            　　autoplay: {
            　　　　delay: 3000,
            　　　　disableOnInteraction: false // 手动切换之后继续自动轮播
            　　},
            　　loop: true,
                observer:true,
                observeParents:true,
            },    
        },
        created(){
            let that = this;
        },
        mounted(){
            let that = this;
            
            that.public.shareLink();
            that.businessCard();
            new Swiper('.swiper-container', {
                observer:true,
                observeParents:true,
                direction: 'horizontal', // 水平切换选项
                loop: true, // 循环模式选项
                autoplay: {
                    disableOnInteraction: false,  //触碰后自动轮播也不会停止
                    delay: 2500,
                }
            })
        },
        methods:{

            businessCard(){
                let that = this;
                let userData = JSON.parse(localStorage.getItem("userData"));
                    that.inviteCode = userData.inviteCode;

                getWeCartShare({
                    memberId: userData.userId
                }).then(res=>{
                    let shareCard = res.data.shareCard.split(',');
                        that.swiper = shareCard.pop();
                    let banner =  shareCard.map((item,index)=>{
                        return{
                                bannerImg: item,
                                img: res.data.userDefaultIcon,
                                name: '柒星社区',
                                description: '柒星社区，一起拼 一起赚',
                                businessCard: userData.inviteCode,
                                codeImg: res.data.QRCode
                            }
                    })
                    that.banner = banner;
                }).catch(error=>{
                    console.log(error);
                })    
            },             
            drawPictures(){
                let that = this;
                let posters = document.getElementById('posters');
                let swiper = document.getElementById('swiper');
                domtoimage.toPng(posters).then(function (dataUrl) {
                    console.log(dataUrl);
                    let img = new Image();
                        img.src = dataUrl;
                        console.log(img);
                        swiper.appendChild(img);
                        that.swiperStatus = false;    
                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error);
                });
            }
        },
    })
</script>